<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <title>第一步</title>
  <meta name="keywords" content=" " />
  <meta name="description" content="" />
  <link rel="stylesheet" href="https://zc.alltesting.cn/css/reset.css">
  <link rel="stylesheet" href="./css/common-style.css">
  <link rel="stylesheet" href="./css/publish.css">
  <!-- 1. 引入vue，需要引用在 ElementUI 之前-->
  <script src="./js/vue.js"></script>
  <!-- 2. 导入css -->
  <link href="./element-ui@2.15.8/lib/theme-chalk/index.css" rel="stylesheet">
  <!-- 3. 引入ElementUI组件 -->
  <script src="./element-ui@2.15.8/lib/index.js"></script>
</head>

<body>
  <!-- header 占位符 -->
  <div style="height: 70px;width:100%">
    <header style="position: fixed;top:0;left:0;right:0;background-color:#212832;height: 70px;z-index: 100;"></header>
  </div>
  <div id="publish01">
    <!-- 工具栏 -->
    <div class="publish-top-bar-placeholder"></div>
    <div class="publish-top-bar">
      <div class="publish-container">
        <div class="publish-top-bar-content">
          <h3>发布项目</h3>
          <el-steps :active="1" align-center class="steps">
            <el-step></el-step>
            <el-step></el-step>
          </el-steps>
        </div>
      </div>
    </div>
    <div class="project-main">
      <div class="project-content">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top" label-width="100px"
          class="project-data">
          <el-form-item label="项目名称：" required>
            <el-row>
              <el-form-item prop="title">
                <el-input v-model="ruleForm.title" placeholder="请输入项目名称"></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item prop="desc">
                <el-input type="textarea" v-model="ruleForm.desc" :rows="3" placeholder="请描述该项目（不得超过250字）"></el-input>
              </el-form-item>
            </el-row>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label="测试类型：" required>
            <el-row>
              <el-form-item prop="testType1">
                <el-radio-group v-model="ruleForm.testType1">
                  <el-radio :label="index" border v-for="(item,index) in testTypeList1"
                    :class="[index===ruleForm.testType1?'current':'']" :key="index">{{item}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item prop="requirementDesc">
                <el-input type="textarea" v-model="ruleForm.requirementDesc" :rows="3" placeholder="需求描述（不得超过250字）"></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item prop="testType2">
                <el-radio-group v-model="ruleForm.testType2" @change="resetInputValue">
                  <el-radio :label="index" border v-for="(item,index) in testTypeList2"
                    :class="[index===ruleForm.testType2?'current':'']" :key="index">{{item}}</el-radio>
                  <el-tooltip content="暂时只支持第三方测试服务" placement="top">
                    <el-radio label="性能测试" disabled border></el-radio>
                  </el-tooltip>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-row class="bug-price-list" v-if="ruleForm.testType2!=2">
              <el-form-item label="初级缺陷：" class="bug-price-item" prop="juniorLevelBug" key="001aaaaaa">
                <el-input v-model.number="ruleForm.juniorLevelBug" placeholder="该项目价格不能低于5元" suffix-icon="el-icon-rmb"
                  oninput="value=value.replace(/[^\d]/g,'')"></el-input>
              </el-form-item>
              <el-form-item label="中级缺陷：" class="bug-price-item" prop="middleLevelBug" key="002bbbbb">
                <el-input v-model.number="ruleForm.middleLevelBug" placeholder="该项目价格不能低于10元" suffix-icon="el-icon-rmb"
                  oninput="value=value.replace(/[^\d]/g,'')"></el-input>
              </el-form-item>
              <el-form-item label="高级缺陷：" class="bug-price-item" prop="higeLevelBug" key="003ccccccccc">
                <el-input v-model.number="ruleForm.higeLevelBug" placeholder="该项目价格不能低于25元" suffix-icon="el-icon-rmb"
                  oninput="value=value.replace(/[^\d]/g,'')"></el-input>
              </el-form-item>
              <el-form-item label="加急缺陷：" class="bug-price-item" prop="urgentLevelBug" key="004ddddddd">
                <el-input v-model.number="ruleForm.urgentLevelBug" placeholder="该项目价格不能低于40元" suffix-icon="el-icon-rmb"
                  oninput="value=value.replace(/[^\d]/g,'')"></el-input>
              </el-form-item>
            </el-row>
            <el-row class="bug-price-list" v-if="ruleForm.testType2===2">
              <el-form-item label="兼容性日志：" class="bug-price-item" prop="compatibilityLogs">
                <el-input v-model.number="ruleForm.compatibilityLogs" placeholder="该项目价格不能低于6元"
                  suffix-icon="el-icon-rmb" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
              </el-form-item>
              <el-form-item label="兼容性缺陷：" class="bug-price-item" prop="compatibilityBug">
                <el-input v-model.number="ruleForm.compatibilityBug" placeholder="该项目价格不能低于10元"
                  suffix-icon="el-icon-rmb" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
              </el-form-item>
            </el-row>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item required>
            <span slot="label">项目模块：<span style="color: #999"> （点击添加模块按钮，添加更多模块）</span></span>
            <el-form-item v-for="(moduleData, index) in ruleForm.moduleArray" :label="'模块' + (index+1)+'：'"
              :key="moduleData.id" class="module-item" required>
              <el-col>
                <el-form-item class="module-name" :prop="'moduleArray.' + index + '.moduleName'" :rules="[
                { required: true, message: '请输入模块名称', trigger: 'blur' },
                { min: 3, message: '模块名称至少 3 个字符', trigger: 'blur' }
                ]">
                  <el-input v-model="moduleData.moduleName" placeholder="请输入模块名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item class="module-people" :prop="'moduleArray.' + index + '.modulePeople'" :rules="[
                { required: true, message: '请输入允许参与的人数', trigger: 'blur' },
                ]">
                  <el-input v-model="moduleData.modulePeople" placeholder="请输入允许参与的人数"
                    oninput="value=value.replace(/[^\d]/g,'')">
                    <span slot="suffix">
                      <el-tooltip content="参与人数：限制本模块最多参与人数" placement="top">
                        <i class="el-icon-info"></i>
                      </el-tooltip>
                    </span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item>
                  <el-button @click.prevent="removeModule(moduleData)" type="danger"
                    v-if="ruleForm.moduleArray.length>1" style="width: 100%;">删除</el-button>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item style="margin-top: 20px;">
              <el-button @click="addModule" type="primary">新增模块</el-button>
            </el-form-item>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item>
            <span slot="label">入测限制：<span style="color: #999">（可多选）</span></span>
            <el-form-item prop="jifen" :rules="validateJifenInput">
              <el-checkbox-group v-model="ruleForm.type" class="restricted-condition" @change="autoValidateJifen">
                <el-checkbox :label="item.value" v-for="(item,index) in ruleForm.restrictedCondition">
                  {{item.title}}
                  <!-- <el-input-number v-model="ruleForm.aaa" :controls='false' placeholder="输入积分" v-if="index===0" class="jifen-input" :disabled="!ruleForm.type.includes('jifen')"></el-input-number> -->
                  <el-input v-model.number="ruleForm.jifen" placeholder="请输入积分" v-if="index===0" class="jifen-input"
                    :disabled="!ruleForm.type.includes('jifen')" oninput="value=value.replace(/[^\d]/g,'')"
                    class="jifen-input"></el-input>
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item>
            <span slot="label">项目详情：<span style="color: #999">（以下内容为选填项）</span></span>
            <el-row>
              <el-form-item prop="remarks">
                <el-input type="textarea" v-model="ruleForm.remarks" :rows="3" placeholder="请输入项目备注（不得超过250字）"></el-input>
              </el-form-item>
            </el-row>
            <el-form-item>
              <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                :before-upload="beforeUpload" :on-exceed="handleExceed" :limit="3" multiple accept=".doc,.docx"
                :file-list="fileList">
                <el-button type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">请上传项目文档，最多可上传3个</div>
              </el-upload>
            </el-form-item>
          </el-form-item>
          <el-form-item class="bottom-bar">
            <el-button type="primary" @click="submitForm('ruleForm')">&emsp;下一步&emsp;</el-button>
            <el-button @click="resetForm('ruleForm')">保存至草稿</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>


  </div>


</body>
<script>
  var app = new Vue({
    el: '#publish01',
    data() {
      return {
        fileList: [{
          name: '测试文档001.doc',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }, {
          name: '测试文档002.docx',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }],
        testTypeList1: ['Web', 'iOS', 'Android', '微信公众号'],
        testTypeList2: ['功能测试', '安全测试', '兼容性测试'],
        isSelectedJifen: true,
        ruleForm: {
          title: '',
          desc: '',
          requirementDesc: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          testType1: '',
          testType2: '',
          type: [],
          resource: '',
          desc1: '',
          email: '',
          jifen: '',
          quantity: '',
          juniorLevelBug: '',
          middleLevelBug: '',
          higeLevelBug: '',
          urgentLevelBug: '',
          compatibilityLogs: '',
          compatibilityBug: '',
          moduleArray: [
            {
              id: 'dfadqw3dqwdq333',
              moduleName: '',
              modulePeople: ''
            }
          ],
          restrictedCondition: [
            {
              value: "jifen",
              title: '积分限制：',
              input: ''
            },
            {
              value: "apply",
              title: '申请限制（测试人员需通过审核才可以加入）',
            },
            {
              value: "bug",
              title: '不允许测试者相互查看缺陷',
            }
          ],
          remarks:""
        },
        rules: {
          title: [
            { required: true, message: '请输入项目名称', trigger: 'blur' },
            { min: 5, message: '项目名称至少 5 个字符', trigger: 'blur' }
          ],
          desc: [
            { required: true, message: '请输入项目描述', trigger: 'blur' },
            { min: 10, max: 250, message: '项目描述在 10~250 个字符之间', trigger: 'blur' }
          ],
          requirementDesc: [
            { required: true, message: '请输入需求描述', trigger: 'blur' },
            { min: 10, max: 250, message: '需求描述在 10~250 个字符之间', trigger: 'blur' }
          ],
          juniorLevelBug: [
            { required: true, message: '请输入项目价格', trigger: 'blur' },
            { type: "number", min: 5, message: '该项目价格不能低于5元', trigger: 'blur' }
          ],
          middleLevelBug: [
            { required: true, message: '请输入项目价格', trigger: 'blur' },
            { type: "number", min: 10, message: '该项目价格不能低于10元', trigger: 'blur' }
          ],
          higeLevelBug: [
            { required: true, message: '请输入项目价格', trigger: 'blur' },
            { type: "number", min: 25, message: '该项目价格不能低于25元', trigger: 'blur' }
          ],
          urgentLevelBug: [
            { required: true, message: '请输入项目价格', trigger: 'blur' },
            { type: "number", min: 40, message: '该项目价格不能低于40元', trigger: 'blur' }
          ],
          compatibilityLogs: [
            { required: true, message: '请输入项目价格', trigger: 'blur' },
            { type: "number", min: 6, message: '该项目价格不能低于6元', trigger: 'blur' }
          ],
          compatibilityBug: [
            { required: true, message: '请输入项目价格', trigger: 'blur' },
            { type: "number", min: 10, message: '该项目价格不能低于10元', trigger: 'blur' }
          ],
          testType1: [
            { required: true, message: '请选择测试设备', trigger: 'change' }
          ],
          testType2: [
            { required: true, message: '请选择测试类型', trigger: 'change' }
          ],
          remarks:[
            { min: 10, max: 250, message: '项目备注在 10~250 个字符之间', trigger: 'blur' }
          ]
        }

      }
    },
    computed: {
      validateJifenInput() {
        return this.isSelectedJifen
          ? [{ required: true, message: '请输入积分值', trigger: 'blur' },]
          : []
      },
    },
    mounted() {
      // 页面渲染的时候判断积分值限制是被需要被校验
      this.isSelectedJifen = this.ruleForm.type.includes('jifen')
    },
    methods: {
      submitForm(formName) {
        console.log(formName);
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 校验成功后提交
            alert('submit!');
          } else {
            // 校验失败，阻止提交
            return false;
          }
        });
      },
      autoValidateJifen() {
        if (!this.ruleForm.type.includes('jifen')) {
          this.$refs['ruleForm'].clearValidate('jifen')
          this.ruleForm.jifen = ""
          this.isSelectedJifen = false
        } else {
          this.isSelectedJifen = true
        }
      },
      // 共用 bug 定价列表模块，切换菜单的时候，input 输入的值进行初始化，并且清除校验的提示信息
      resetInputValue($event) {
        this.ruleForm.juniorLevelBug = ""
        this.ruleForm.middleLevelBug = ""
        this.ruleForm.higeLevelBug = ""
        this.ruleForm.urgentLevelBug = ""
        this.ruleForm.compatibilityLogs = ""
        this.ruleForm.compatibilityBug = ""
        if ($event !== 2) {
          this.$refs['ruleForm'].clearValidate(['juniorLevelBug','middleLevelBug','higeLevelBug','urgentLevelBug'])
        }
      },
      // 移除模块
      removeModule(item) {
        var index = this.ruleForm.moduleArray.indexOf(item)
        if (index !== -1) {
          this.ruleForm.moduleArray.splice(index, 1)
        }
      },
      // 增加模块
      addModule() {
        this.ruleForm.moduleArray.push({
          id: Date.now(),
          moduleName: '',
          modulePeople: ''
        });
      },

      // 限制上传文件的类型（.doc/.docx）和大小
      beforeUpload(file) {
        var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
        let isLt = file.size / 1024 / 1024 < 2; // 判断是否小于2mb
        console.log("testmsg===", testmsg);
        // .doc,.docx
        const extension1 = testmsg === "doc";
        const extension2 = testmsg === "docx"

        // const isLt2M = file.size / 1024 / 1024 < 10
        if (!extension1 && !extension2) {
          this.$message({
            message: "请上传.doc、.docx 类型的文档!",
            type: "info",
            offset: 80,
          });
          return false;
        } else if (!isLt) {
          this.$message({
            message: "请上传小于2MB文档!",
            type: "info",
            offset: 80,
          });
          return false;
        } else {
          return true;
        }
      },
      handleChange(file, fileList) {
        this.fileList = fileList.slice(-3);
      },
      // 超出上传的文件个数提示
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },

    }
  })
</script>

</html>